<template>
  <div>
    <transition name="fade">
      <div class="center_label">
        <Card class="box-card">
          <div slot="header" class="clearfix">
            <span v-show="!isShowArtList">目前共有{{tagsList.length}}个标签:</span>
            <transition name="fade">
              <span v-show="isShowArtList">#{{ currentTag }}</span>
            </transition>
            <Button
              style="float: right; padding: 3px 0;"
              type="text"
              v-show="isShowArtList"
              @click="goback"
            >返回</Button>
            <Button
              style="float: right; padding: 3px 0; margin-right:15px;"
              type="text"
              v-if="isShowArtList"
              v-show="$store.state.isLogin"
              @click="deleteTag()"
            >删除此标签</Button>
            <Button
              style="float: right; padding: 3px 0;"
              type="text"
              maxlength="6"
              @click="isShow = true"
              v-if="$store.state.isLogin"
              v-show="!isShowArtList"
            >添加标签</Button>
            <!-- <transition name="move">
            <Card class="box-card alert_add_tag" v-if="isShow">
              <div class="el-card__body">
                请输入你想要添加的标签名:
                <Input v-model="tagName" style="width: 30%" size="mini"></Input>
                <Button size="small" type="text" round @click="save">确认保存</Button>
                <Button size="small" type="text" round @click="isShow = !isShow">取消</Button>
              </div>
            </Card>
            </transition>-->
          </div>
          <!-- 所有标签 -->
          <div class="label_item" v-if="!isShowArtList">
            <div class="label_list" v-for="(item, index) in tagsList" :key="index">
              <Button type="text" class="__list" @click="showArtList(item)">#{{item.tagName}}</Button>
            </div>
          </div>
          <!-- 当前标签下的文章 -->
          <transition name="move">
            <div class="article_item" v-if="isShowArtList">
              <div class="article_list" v-for="(item, index) in artcleList" :key="index">
                <Link class="article_title" @click="showArticleView(item._id)">{{ item.title }}</Link>
                <div class="article_update">{{ new Date(item.created_time) | date-format}}</div>
              </div>
            </div>
          </transition>
        </Card>
      </div>
    </transition>
    <Dialog title="请输入你需要添加的标签" :visible.sync="isShow" width="30%" @close="closeDialog">
      <Input v-model="tagName"></Input>

      <span slot="footer">
        <Button @click="isShow = false">取 消</Button>
        <Button type="primary" @click="save">确 定</Button>
      </span>
    </Dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Card, Button, Input, Link, Dialog } from "element-ui";
import { getTagsFun, geArtListByTag, addTag, deleteTag } from "@/api/api";
export default {
  props: ["isShowTag"],
  inject: ["reload"],
  data() {
    return {
      tagName: "",
      isShow: this.isShowTag,
      tagsList: [],
      visible: false,
      isShowArtList: false,
      currentTag: "",
      currentTagById: "",
      artcleList: []
    };
  },

  methods: {
    async __initTags() {
      const res = await getTagsFun();
      if (res.data.code === 1) {
        this.tagsList = res.data.data;
      }
    },
    async save() {
      // 添加到数据库,更新state等等
      const res = await addTag({tagName: this.tagName})
      if (res.data.code === 1) {
        this.$message.success('添加成功')
        this.isShow = false
        this.__initTags()
      }else{
        this.$message.warning(res.data.msg)
      }
      this.showArtList
      this.isShow = false;
    },
    async showArtList(item) {
      const res = await geArtListByTag({ tagName: item.tagName });
      if (res.data.code === 1) {
        this.artcleList = res.data.data;
      }
      this.currentTag = item.tagName;
      this.currentTagById = item._id;
      this.isShowArtList = !this.isShowArtList;
    },
    goback() {
      this.isShowArtList = !this.isShowArtList;
    },
    showArticleView(id) {
      this.$router.push({
        path: "/article/" + id
      });
    },
    deleteTag() {
      this.$confirm('确认要删除吗？', '提示').then(async ()=>{
        const res = await deleteTag({id: this.currentTagById})
        if(res.data.code === 1){
          this.$message.success('删除成功');
          this.isShowArtList = false
          this.__initTags()
        }else{
          this.$message.warning(res.data.msg);
        }
      }).catch(()=>{return})
    },
    closeDialog() {}
  },
  mounted() {
    this.__initTags();
  },
  computed: {
    ...mapState(["ArticleList"]),
    ...mapState(["artlistByTag"])
  },
  components: {
    Card,
    Button,
    Input,
    Link,
    Dialog
  }
};
</script>

<style lang="scss" scoped>
.center_label {
  text-align: left;
  .clearfix {
    .alert_add_tag {
      position: absolute;
      right: auto;
      top: auto;
    }
  }
  .label_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .__list :hover {
      border-bottom: 1px solid #409eff;
    }
  }
  .article_item {
    .article_list {
      display: flex;
      justify-content: space-between;
      padding: 4px;
      .article_update {
        font-size: 10px;
      }
    }
  }
}
</style>
